<template>
  <!-- 接入管理 -->
  <div class="fileQuery">
    <div class="fileQuery-query">
        <el-form :model="form" ref="form" :inline="true" label-width="100px">
          <el-form-item label="系统名称:" size="mini">
            <el-input
              v-model="form.systemName"
              placeholder="请输入系统名称"
            ></el-input>
          </el-form-item>
          <el-button type="primary" size="mini" @click="query">查 询</el-button>
          <el-button size="mini" plain @click="reset">重 置</el-button>
        </el-form>
      </div>
    <el-card>
      
      <div style="margin: 12px 0px">
        <el-button
          type="primary"
          size="mini"
          @click="addData"
          icon="el-icon-plus"
          >新 增</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="bathDelete"
          icon="el-icon-delete"
          >删 除</el-button
        >
      </div>
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 12px"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            background: '#F5F7FA',
            color: '#303133',
          }"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" type="index" width="60">
          </el-table-column>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            v-for="(item, index) in columns"
            :key="index"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="auto">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="details(scope.row)">
                <span style="color: #1890ff">详情</span></el-button
              >
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="del(scope.row)"
                style="padding-left: 12px"
              >
                <el-button type="text" size="small" slot="reference">
                  <span style="color: #e0433f">删除</span></el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :total="pagerList.total"
            :page-size="pagerList.intPageSize"
            :current-page="pagerList.page"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  AccessManagement,
  AccessManagement_delete,
  AccessManagement_BathDelete,
} from "@/api/business";
export default {
  data() {
    return {
      form: {
        systemName: "",
      },
      ids: [],
      pagerList: {
        intPageSize: 10,
        page: 1,
        total: 0,
      },

      columns: [
        {
          label: "系统名称",
          prop: "SystemName",
          width: "auto",
        },
        {
          label: "地址",
          prop: "SystemAddress",
          width: "auto",
        },

        {
          label: "数据库名称",
          prop: "DatabaseName",
          width: "auto",
        },
        {
          label: "数据库地址",
          prop: "DatabaseAddress",
          width: "auto",
        },

        {
          label: "接入时间",
          prop: "CreateTime",
          width: "auto",
        },
        {
          label: "更新人",
          prop: "UpdateByName",
          width: "auto",
        },
        {
          label: "更新时间",
          prop: "UpdateTime",
          width: "auto",
        },
        {
          label: "备注",
          prop: "Remark",
          width: "auto",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    addData() {
      this.$router.push({
        path: "/xmGlAdd",
      });
      localStorage.setItem("xmGlType", "新增");
    },
    async del(data) {
      let res = await AccessManagement_delete(data.Id);
      if (res.data.status == 200) {
        this.getTableData();
        this.$message({
          type: "success",
          message: "删除成功",
        });
      }
    },
    bathDelete() {
      if (this.ids.length == 0) {
        this.$message({
          type: "error",
          message: "至少选择一条数据!",
        });
        return;
      }
      this.$confirm("确定要批量删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await AccessManagement_BathDelete(this.ids);
          if (res.data.status == 200) {
            this.getTableData();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(data) {
      console.log(data);
      data.forEach((element) => {
        this.ids.push(element.Id);
      });
    },

    query() {
      this.getTableData();
    },
    reset() {
      this.form = {
        systemName: "",
      };
      this.pagerList = {
        intPageSize: 10,
        page: 1,
        total: 0,
      };
      this.getTableData();
    },
    details(data) {
      console.log(data, "data");
      this.$router.push({
        path: "/xmGlDetails",
      });
      localStorage.setItem("xmGlType", "详情");
      localStorage.setItem("xmGlDetails", JSON.stringify(data));
    },
    getTableData() {
      let value = Object.assign(this.form, this.pagerList);
      AccessManagement(value).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          this.tableData = res.data.response.data;
          this.pagerList.total = res.data.response.dataCount;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },

    toExamine(row) {
      console.log(row);
      this.$refs.verificationOfArchivesToExamine.show(row);
    },
    check(row) {
      console.log(row);
      this.$refs.verificationOfArchivesCheck.show(row);
    },
    currentChange(page) {
      this.pagerList.page = page;
      this.getTableData();
    },
  },
};
</script>

<style  scoped>
.fileQuery {
  min-width: 1000px;
  width: 100%;
}
.fileQuery-query {
  padding: 16px;
  margin: 16px;
  background-color: #fff;
}
.fileQuery-table {
  /* // padding: 12px; */
  width: 100%;
  padding-top: 12px;
}
.search .el-button {
  background-color: #4965d2;
  color: #fff;
  border-color: #4965d2;
}
.pagination {
  float: right;
  margin: 24px 0px;
}
/deep/ .el-col-6 {
  height: 58px;
}
/deep/ .el-select {
  width: 100%;
}
</style>
